<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:composition> 

        <h:form id="form" >		
            <c:set value="#{sessionScope.extra1}" var="item"/>
            <p:panel  header="Edicion de #{backofficeItemManagedBean.selectedItem.idItem} - #{backofficeItemManagedBean.selectedItem.name}" style="text-align: center;margin: auto; max-width: 700px">




               
                <h:panelGrid columns="4" style="margin: auto">
                    <h:panelGrid columns="1" >
                        <p:graphicImage value="#{item.picture}" height="250px" />
                    </h:panelGrid>
                    <h:panelGrid columns="3" >

                        <h:outputLabel for="name" value="Nombre: "  />  
                        <p:inputText id="name" value="#{item.name}" size="25" maxlength="255" label="Nombre" required="true" >  
                            <p:watermark for="name" value="Ej. Wester Digital 4Tb"/>
                            <f:validateLength minimum="6" />  
                            <p:ajax update="msgName" event="keyup" />
                        </p:inputText>  
                        <p:message for="name" id="msgName" display="icon"/> 

                        <h:outputLabel for="price" value="Precio(€): "  />  
                        <p:inputText id="price" value="#{item.price}" size="25" maxlength="255" label="Nombre" required="true" >  
                            <p:watermark for="price" value="160.45"/>
                            <f:validateLength minimum="1" />  
                            <p:ajax update="msgPrice" event="keyup" />
                        </p:inputText>  
                        <p:message for="price" id="msgPrice" display="icon"/> 

                        <h:outputLabel for="registrationDate" value="Fecha alta: "  />  
                        <p:inputText id="registrationDate" readonly="true" value="#{utilsBean.formatDate(item.registrationDate)}" size="25" maxlength="255" label="Nombre" required="true" >  

                            <f:validateLength minimum="1" />  
                            <p:ajax update="msgRegDate" event="keyup" />
                        </p:inputText>  
                        <p:message for="registrationDate" id="msgRegDate" display="icon"/>

                        <h:outputLabel for="cate" value="Categoría:"  /> 
                        <p:selectOneMenu id="cate" value="#{item.idCategory}" converter="CategoryConverter" >  
                            <f:selectItems value="#{backofficeCategoryManagedBean.childrenCategories()}" var="cat" itemLabel="#{cat.idCategory} - #{cat.name}" itemValue="#{cat}" />  
                        </p:selectOneMenu> 
                        <p:spacer width="1"/>

                        <p:outputLabel value="Estado:"/>
                        <p:selectOneRadio id="status" value="#{item.status}">
                            <f:selectItem itemLabel="Activo" itemValue="1" />
                            <f:selectItem itemLabel="Sin stock" itemValue="2" />
                            <f:selectItem itemLabel="Eliminado" itemValue="0" />
                        </p:selectOneRadio>
                        <p:spacer width="1" height="1" />

                    </h:panelGrid>
                </h:panelGrid>
                <h:panelGrid columns="3" style="margin: auto">
                    <p:outputLabel value="Descripción:"/>
                    <h:inputTextarea id="description" value="#{item.description}" style="min-width: 480px; min-height: 200px">
                        <f:validateLength minimum="6" />  
                        <p:ajax update="msgDescription" event="keyup" />
                    </h:inputTextarea>  
                    <p:message for="description" id="msgDescription" display="icon"/>

                </h:panelGrid>
                <h:panelGrid columns="1" style="margin: auto">
                    <p:commandButton value="Guardar cambios" ajax="false" action="#{backofficeItemManagedBean.saveChanges(item)}"/>
                </h:panelGrid>
            </p:panel>



        </h:form>


    </ui:composition>
</html>
